<template>
  <div class="pageWrap">
    <div class="wrap">
      <div class="headWrap" v-if="defaultKeyword">
        <input type="search"
               class="searchInput"
               v-model="inputVal"
               @keyup.enter="test(inputVal)"
               :placeholder="defaultKeyword.keyword"/>
        <span class="cancel" @click="clear">取消</span>
      </div>
      <div class="history" v-if="inputValArr.length>0">
        <span>历史记录:</span>
        <ul>
          <li v-for="(item,index) in inputValArr" :key="index">
            {{item}}
          </li>
        </ul>
        <button @click="clearHistory">清除历史记录</button>
      </div>
      <transition name="searcResult">
        <div class="recResult" v-if="searchResult">
          <ul class="recs" v-for="(item,index) in searchResult" :key="index">
            <li>{{item}}</li>
          </ul>
        </div>
      </transition>
    </div>
    <div class="defaultKeywords" >
      <span>热门搜索：</span>
      <ul v-if="defaultKeywords">
        <li v-for="(item,index) in defaultKeywords"
            :key="index"
            :class="{on:item.highlight===1}"
        >{{item.keyword}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {reqSearch,reqInit} from 'api'
  import StorageUtil from '@/utils/storageUtil'
  export default {
    name: 'index',
    data(){
      return{
        inputVal: '',
        timer: null,
        searchResult: [],
        initData: {},
        inputValArr: [],
      }
    },
    async mounted(){
      const result = await reqInit()
      // console.log(result.data)
      this.initData = result.data
      
      // 取出LocalStorage里的数据
      const localHistoryData = StorageUtil.readHistory()
      if(localHistoryData){
        this.inputValArr = localHistoryData
      }
    },
    computed:{
      defaultKeyword(){
        return this.initData.defaultKeyword
      },
      defaultKeywords(){
        return this.initData.hotKeywordVOList
      }
    },
    methods:{
      async test(inputVal){
        if(this.inputVal === ''){
          return false
        }
        if(this.inputVal === inputVal){ //关键代码 避免先请求后返回问题，确保给列表赋值是以当前输入的值为参数的
          //把用户输入的字符串存到Localstorage
          this.inputValArr.push(inputVal)
          StorageUtil.saveHistory(this.inputValArr)
          
          const res = await reqSearch(inputVal)
          if(res.code === '200'&&res.data){
            let data = res.data
              //console.log(data)
            if(data.length === 0){
              this.searchResult = []
            }else{
              this.searchResult = data
            }
          }else{
            this.searchResult = []
            console.log('请重新输入')
          }
        }
      },
      clear(){
        this.inputVal = ''
        this.searchResult = []
      },
      clearHistory(){
        StorageUtil.removeHistory()
        this.inputValArr = []
        //this.history = []
      }
    },
    watch:{
      inputVal(newVal, oldVal){
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.test(newVal)
        }, 1000)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .pageWrap
    width 100%
    height 1400px
    background: #f4f4f4
    .wrap
      display flex
      flex-direction column
      height 250px
      background: #fff
      .headWrap
        height 88px
        margin-top 10px
        padding 16px 50px
        box-sizing border-box
        z-index 100
        display flex
        justify-content space-between
        align-items center
        .searchInput
          width 580px
          height 60px
          border-radius 10px
          outline none
          border none
          background: no-repeat url("https://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-553dba3aff.png") #eee
          background-size 28px 28px
          background-position 40px 14px
          padding 0 15%
        .cancel
          font-size 30px
          color #000
      .history
        padding 0 20px
        span
          font-size 30px
        ul
          display flex
          flex-wrap wrap
          padding 10px
          li
            height 30px
            font-size 24px
            line-height 30px
            padding 10px
            border 1px #333 solid
            text-align: center
            margin 10px 10px
      .recResult
        padding 20px 50px
        &.searchResult-enter-active
          transition transform 0.5s
        &.searchResult-leave-active
          transition transform 3s
        &.searchResult-enter, &.fade-leave-to
          transform translateY(100px)
        .recs
          li
            font-size 30px
            font-family "Microsoft YaHei UI"
            color #7F7F7F
            line-height 60px
            width 100%
            border-bottom 1px solid #eee
            height 60px
            margin 10px 10px
      
    .defaultKeywords
      margin-top 30px
      padding 20px 0
      background #fff
      width 100%
      height 300px
      span
        font-size 30px
        margin-left 20px
      ul
        margin-top 30px
        display flex
        flex-wrap wrap
        // justify-content space-evenly
        li
          zoom 1
          padding 5px 10px
          border 1px solid #eee
          text-align: center
          height 30px
          line-height 30px
          white-space nowrap
          margin 10px 15px
          &.on
            zoom 1
            color #b4282d
            border #b4282d 1px solid
</style>

























